<style lang="scss">
    @import "../utils/base.scss";
</style>
<template>
    <div style="background-color: #FFFFFF;height: calc(100vh - 118px);padding-top:40px;overflow-y: auto;">
        <table border="1px" class="tale" align="center" style="width:100%;">
            <tr align="center">
                <td colspan="4">
                    <Icon type="ios-contact" style="font-size:150px"/>
                </td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th style="width:10vw">用户账号</th>
                <td style="width:20vw">{{ user.user_number }}</td>
                <th style="width:10vw">用户姓名</th>
                <td style="width:20vw">{{ user.user_name }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th>电话号码</th>
                <td>{{ user.phone }}</td>
                <th>个人邮箱</th>
                <td>{{ user.email }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th>身份证号</th>
                <td>{{ user.id_card }}</td>
                <th>4A账号</th>
                <td>{{ user.fourA }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th>所属角色</th>
                <td>
                    <template v-for="(item,index) in user.roles">
                        <span>{{ item.role_name}}</span>
                        <span v-if="index == user.roles.length-1"></span>
                        <span v-else >、</span>
                    </template>
                </td>
                <th>所属租户</th>
                <td>
                    <template v-for="(item,index) in user.tenants">
                        <span>{{ item.tenant_name}}</span>
                        <span v-if="index == user.tenants.length-1"></span>
                        <span v-else >、</span>
                    </template>
                </td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th>登录组织</th>
                <td>{{ user.department }}</td>
                <th></th>
                <td></td>
            </tr>
            <tr align="center" style="height: 3vw">
                <td colspan="4">
                    <Button type="primary" style="position:relative;" @click="editPerson">修改个人信息</Button>
                    <!-- <Button type="primary" style="position:relative;" @click="shwoModal = true">修改密码</Button> -->
<!--                     <Button type="primary" style="position:relative;" @click="return01()">返回</Button> -->
                </td>
            </tr>
        </table>
        <pwdModal v-model="shwoModal"></pwdModal>
        <Modal title="修改个人信息" v-model="person.show" :mask-closable="false" width="40%"  @on-ok="add_ok()" @on-cancel="cancel('person')"  :loading="loading">
            <Form ref="person" :model="person" :rules="ruleInline" label-position="left" :label-width="100">
<!--                 <Row >
                    <Col>
                        <FormItem label="电话号码：" prop="phone">
                            <Input v-model="person.phone" @on-change="checkPhone"/>
                        </FormItem>
                    </Col>
                </Row >
                <Row >
                    <Col>
                        <FormItem label="个人邮箱：" prop="email">
                            <Input v-model="person.email"/>
                        </FormItem>
                    </Col>
                </Row > -->
                <Row >
                    <Col span="24" >
                        <FormItem label="4A账号：">
                            <Input v-model="person.fourA"/>
                        </FormItem>
                    </Col>
                </Row >
                <Row >
                    <Col span="24" >
                        <FormItem label="个人身份证：">
                            <Input v-model="person.id_card"/>
                        </FormItem>
                    </Col>
                </Row >
            </Form>
        </Modal>
    </div>

</template>

<script>
    import expandRow from '../comp_user/user_expand.vue'
    import usermain from "../comp_user/user_main"
    import mpage from "../comp_chatter/mpage"
    import minfo from "../comp_chatter/minfo"
    import mheader from "../comp_chatter/mheader"
    import mcontainer from "../comp_chatter/mcontainer"
    import Axios from 'axios'
    import ajax from "../ajax_util"
    import pwdModal from './pwdModal'
    import * as types from '../store/types'

    export default {
        components: {
            expandRow, usermain, mpage, mheader, mcontainer,minfo,pwdModal
        },
         data () {
            const validatePhone = (rule, value, callback) => {
                this.repetition.phone_repetition=-1;
                let reg = this.validateUtils.telephoneRule;
                if(value != '' && value != null) {
                    if(!reg.test(value)){
                        this.repetition.phone_repetition=1;
                        callback(new Error('请输入正确的联系方式!'));
                    }else{
                        callback();
                    }
                }else{
                    callback();
                }
            };
            const validateEmail = (rule, value, callback) => {
                this.repetition.email_repetition=-1;
                let reg = this.validateUtils.eMailRule;
                if(value != '' && value != null) {
                    if(!reg.test(value)){
                        this.repetition.email_repetition=1;
                        callback(new Error('请输入正确的邮箱!'));
                    }else{
                        callback();
                    }
                }else{
                    callback();
                }
            };
            return {
                ruleInline:{
                    phone:[
                        { required: false, validator: validatePhone, trigger: 'blur' }
                    ],
                    email:[
                         { required: false, validator: validateEmail, trigger: 'blur' }
                    ]
                },

                shwoModal: false,
                myModal:false,
                imageUrl: this.CONFIG.file_url,
                u_id:-1,
                roleList: [],
                user:{},
                loading: true,
                person:{
                  id:-1,
                  show:false,
                  // phone:"",
                  // email:"",
                  fourA:"",
                  id_card:""
                },
                temp_phone:"",
                repetition:{
                    phone_repetition:-1,
                    email_repetition:-1
                },
                ifPhone:false,
            }
         },
        mounted() {
            this.get_user();
        },
        methods: {
            get_user(){
                this.user = this.$store.state.user;
            },
            return01(){
                this.$router.go(-1);
            },
            editPerson(){
                this.person.show = true;
                this.person.id = this.user.id;
                // this.person.phone = this.user.phone;
                // this.person.email = this.user.email;
                this.person.fourA = this.user.fourA;
                this.person.id_card = this.user.id_card;

                // this.temp_phone = this.user.phone;
            },
            add_ok(){
                // if(this.repetition.phone_repetition === 1){
                //     this.messageWarningFn('请输入正确的联系方式!');
                //     return
                // }else if(this.repetition.email_repetition === 1){
                //     this.messageWarningFn('请输入正确的邮箱!');
                //     return
                // }else{
                    var that=this;
                    var url=this.CONFIG.url_know+'/person';
                    var user={
                        id:0,
                        // phone:this.person.phone,
                        // email:this.person.email,
                        fourA:this.person.fourA,
                        id_card:this.person.id_card,
                        // ifPhone:this.ifPhone
                    }

                    console.log("-------ifPhone-------------",this.ifPhone,this.person.phone,this.temp_phone)
                    ajax.post({
                        url:url,
                        that:that,
                        data:user,
                        success:function(data){
                            // if(data == -1 && that.ifPhone){
                            //     that.messageWarningFn('该电话号码已注册!');
                            // }else
                            if(data == 0){
                                that.messageWarningFn('修改失败，用户token已过期，请重新登录');
                            }else{
                                that.$Notice.success({
                                    title: '成功修改个人信息'
                                });
                                that.getUser();
                                that.person.show=false;
                                // that.ifPhone = false;
                            }

                        }
                    })
                // }
            },
            getUser(){
                var that=this;
                var url=this.CONFIG.url_know+'/user';
                ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        data.department = that.user.department;
                        data.departments = that.user.departments;
                        //console.log("-------user-------------",data);
                        var obj = JSON.stringify(data);
                        that.$store.commit(types.USER, obj);
                        that.get_user();
                    }
                })
            },
            messageWarningFn (text) {
              this.$Message.warning(text)
              setTimeout(() => {
                this.loading = false
                this.$nextTick(() => {
                  this.loading = true
                });
              }, 1);
            },
            cancel(name){
                this.$refs[name].resetFields();
                // this.repetition.phone_repetition = -1;
                // this.repetition.email_repetition = -1;
            },
            checkPhone(){
                if(this.person.phone == this.temp_phone){
                    this.ifPhone = false;
                }else{
                    this.ifPhone = true;
                }
            },
        }
    }

</script>
